<section id="useManage1" class="ml-24 mr-24">
  <div class="updateImg"></div>
  <hl-page-header title="应用管理">
    <hl-button v-if="quanxian.indexOf('c214') > -1" @on-click="useLayout" type="outline">应用布局配置</hl-button>
  </hl-page-header>
  <!-- //搜索部分 -->
  <div class="clearfix mt-15 search-container-house border-b pb-10">
    <div class="pull-left">
      <p class="color-cfcfcf">标签名称</p>
      <div style="width: 140px;">
        <div class="select-ul house-sharing-text">
    			<span class="select-name br-4" ref="tagName">请选择</span>
          <ul>
            <li v-for="(item, index) in tagsArr" @click="tagSubDt(item)">{{ item.tagName }}</li>
          </ul>
        </div>
      </div>
    </div>
		<div class="pull-left ml-10">
		  <p class="color-cfcfcf">子标签</p>
		  <div style="width: 140px;">
		    <div class="select-ul house-sharing-text">
					<span class="select-name br-4" ref="subTag">请选择</span>
		      <ul>
		        <li v-for="(item, index) in tagSubArr" @click="subTag(item)">{{ item.tagName }}</li>
		      </ul>
		    </div>
		  </div>
		</div>
		<div class="pull-left ml-10">
		  <p class="color-cfcfcf">应用名称</p>
		  <div style="width: 140px;">
        <div class="select-ul house-sharing-text">
					<span class="select-name br-4" ref="useName">请选择</span>
		      <ul>
		        <li v-for="(item, index) in microappNamesArr" @click="setMicroappNameId(item)">{{ item.microappName }}</li>
		      </ul>
		    </div>
		  </div>
		</div>
		<div class="pull-left ml-10">
		  <p class="color-cfcfcf">内容属性</p>
		  <div style="width: 140px;">
		    <div class="select-ul house-sharing-text">
					<span class="select-name br-4" ref="contentAttribute">请选择</span>
		      <ul>
		        <li v-for="(item, index) in contentAttributeArr" @click="setElementType0(item)">{{ item.dictName }}</li>
		      </ul>
		    </div>
		  </div>
		</div>
    <div class="pull-left ml-10" v-if="tabConfigType == 'JSON_VALUE'">
		  <p style="color:#fff;">内容属性</p>
		  <div style="width: 140px;">
		    <div class="select-ul house-sharing-text">
					<span class="select-name br-4" ref="contentAttribute1">请选择</span>
		      <ul>
		        <li v-for="(item, index) in tabConfigTypeArr" @click="setElementType1(item)">{{ item.dictName }}</li>
		      </ul>
		    </div>
		  </div>
		</div>
		<div class="pull-left ml-10">
		  <p class="color-cfcfcf">从属应用</p>
		  <div style="width: 140px;">
		    <div class="select-ul house-sharing-text">
					<span class="select-name br-4" ref="slaveUse">请选择</span>
		      <ul>
		        <li v-for="(item, index) in sonApplysArr" @click="setSlaveApplicationId(item)">{{ item.parentApplyName }}</li>
		      </ul>
		    </div>
		  </div>
		</div>
    <div class="pull-left" :class="{'ml-24': tabConfigType != 'JSON_VALUE'}">
      <p style="color:#fff;">/</p>
      <hl-button @on-click="applytagsGet" size="mini">查询</hl-button>
      <hl-button @on-click="resetDt" size="mini">重置</hl-button>
    </div>
  </div>

  <!-- //主体列表 -->
  <div class="clearfix">
		<!-- 左边 ←_← -->
		<div class="pull-left br-4 mt-10 border" style="width: 374px;overflow: hidden;">
			<vue-scroll :ops="ops" style="height: 440px;">
				<div class="dy-flex text-center line-height-40" style="background:rgba(240,242,255,1);color:rgba(165,170,183,1);">
					<div class="dy-fx-2">标签名称</div>
					<div class="dy-fx-1">排序</div>
					<div class="dy-fx-2">操作</div>
				</div>
				<div class="dy-flex text-center line-height-40 um-list" :class="{'active-use': item.tagId == activeTagId}" v-for="(item, index) in lData">
					<div class="dy-fx-2 ellipsis-1" @click="tagApplysDt(item)">{{ item.tagName }}</div>
					<div class="dy-fx-1" @click="tagApplysDt(item)">{{ item.seq }}</div>
					<div class="dy-fx-2">
						<a href="javascript:;" class="mr-10" @click="tagShow(item)" v-if="quanxian.indexOf('c215') > -1">编辑</a>
						<a href="javascript:;" @click="setTagVisiable(item)" v-if="quanxian.indexOf('c216') > -1">{{ item.visiable == '1' ? '隐藏' : '显示' }}</a>
					</div>
				</div>
			</vue-scroll>
		</div>
		<!-- 右边 →_→ -->
		<div class="pull-right br-4 mt-10 border" style="width: 580px;">
			<vue-scroll :ops="ops" style="height: 440px;">
				<div class="dy-flex text-center line-height-40" style="background:rgba(240,242,255,1);color:rgba(165,170,183,1);">
					<div class="dy-fx-2">应用名称</div>
					<div class="dy-fx-2">内容属性</div>
					<div class="dy-fx-2">子标签</div>
					<div class="dy-fx-2">从属应用</div>
					<div class="dy-fx-1">排序</div>
					<div class="dy-fx-3">操作</div>
				</div>
				<div class="dy-flex text-center line-height-40 um-list" v-for="(item, index) in tagApplysDtArr">
					<div class="dy-fx-2 ellipsis-1">{{ item.elementName }}</div>
					<div class="dy-fx-2 ellipsis-1">{{ item.elementType }}</div>
					<div class="dy-fx-2 ellipsis-1">{{ item.sonTag || '--' }}</div>
					<div class="dy-fx-2 ellipsis-1">{{ item.subordinateApplication || '--' }}</div>
					<div class="dy-fx-1">{{ item.seq }}</div>
					<div class="dy-fx-3">
						<a href="javascript:;" class="mr-5" @click="editUseShow(item)" v-if="quanxian.indexOf('c218') > -1">编辑</a>
						<a href="javascript:;" class="mr-5" @click="setApplyVisiable(item)" v-if="quanxian.indexOf('c220') > -1">{{ item.visiable == '1' ? '隐藏' : '显示' }}</a>
						<a href="javascript:;" @click="applyDel(item)" v-if="quanxian.indexOf('c219') > -1">删除</a>
					</div>
				</div>
			</vue-scroll>
		</div>
	</div>

	<div class="mt-10 mb-20 text-right">
		<button type="button" class="btn n-btn-primary" @click="addShow" v-if="quanxian.indexOf('c217') > -1">新增应用</button>
	</div>

  <!-- //标题编辑 2019-2-19 -->
  <div class="use-pop" v-if="flag">
		<div class="use-manage br-4">
			<div class="title">标题编辑</div>
			<div class="close icon-Gm-close font-14 color-666" @click="tagHide"></div>
			<div class="content">
				<div class="dy-flex ml-24 mr-24 pt-10">
					<div class="dy-fx-1 text-right line-height-34">标签名称：</div>
					<div class="dy-fx-3">
						<input type="text" class="form-control" style="width: 70%;" v-model="editTag.name" />
					</div>
				</div>
				<div class="dy-flex ml-24 mr-24 pt-10 pb-10">
					<div class="dy-fx-1 text-right line-height-34">标签排序：</div>
					<div class="dy-fx-3">
						<input type="number" class="form-control" style="width: 70%;" v-model="editTag.seq" />
					</div>
				</div>
			</div>
			<div class="ptb-10 text-center">
				<button type="button" class="btn n-btn-primary mr-10" style="min-width: 90px;" @click="tagPut">确定</button>
				<button type="button" class="btn n-btn-outline" @click="tagHide">取消</button>
			</div>
		</div>
  </div>

	<!-- 应用编辑 2019-02-12 -->
	<div class="use-edit-pop" v-if="editFlag">
		<div class="use-edit br-4">
			<div class="title text-center line-height-45">应用{{ useTitle }}</div>
			<div class="close icon-Gm-close text-center line-height-45 font-14" @click="hideAddEditUse"></div>
			<div class="clearfix ptb-20" style="background:rgba(249,249,249,1);">
				<div class="pull-left relative ml-24" style="width: 82px;">
					<div class="img text-center cursor relative" style="width: 82px;height: 82px;background:rgba(237,237,237,1);border-radius: 50%;overflow: hidden;">
						<div class="pic" style="width: 82px;height: 82px;" v-if="params.icon">
							<img :src="params.icon + '?w=82&h=82'" width="82" height="82" />
							<p class="absolute line-height-34 text-center font-12" style="left: 0;bottom: 0;width: 100%;background:rgba(0,0,0,0.5);color: #fff;" @click="updateImg">重新上传</p>
						</div>
						<div style="padding-top: 25px;" v-if="!params.icon" @click="updateImg">
							<p class="icon-Gm-add font-16 color-666"></p>
							<p class="font-12 pt-8 color-999">上传图片</p>
						</div>
					</div>
					<p class="text-center pt-15 color-999">应用图标</p>
				</div>
				<div class="pull-left ml-24" style="width: 650px;">
					<!-- begin -->
					<div class="dy-flex">
						<div class="dy-fx-1 line-height-34 color-666">所在标签：</div>
						<div class="dy-fx-2">
							<div class="select-ul">
								<span class="select-name br-4 box-i-shadow" ref="nowTag">请选择</span>
							  <ul>
							    <li v-for="(item, index) in tagAllArr" @click="setTag(item)">{{ item.tagName }}</li>
							  </ul>
							</div>
						</div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-1 line-height-34 color-666"><span >应用从属：</span></div>
						<div class="dy-fx-2">
							<div class="select-ul" >
								<span class="select-name br-4 box-i-shadow" ref="subordinate">非必选</span>
							  <ul>
							    <li v-for="(item, index) in sonApplysArr" @click="setParentId(item)">{{ item.parentApplyName }}</li>
							  </ul>
							</div>
						</div>
					</div>

					<div class="dy-flex mt-10">
						<div class="dy-fx-1 line-height-34 color-666">内容属性：</div>
						<div class="dy-fx-2 dy-flex">

							<div class="dy-fx-1">
                <div class="select-ul">
  								<span class="select-name br-4 box-i-shadow" ref="nature">请选择</span>
  							  <ul>
  							    <li v-for="(item, index) in contentAttributeArr" @click="setElementType(item)">{{ item.dictName }}</li>
  							  </ul>
  							</div>
              </div>

              <div class="dy-fx-1" v-if="configType == 'JSON_VALUE'">
                <div class="select-ul">
  								<span class="select-name br-4 box-i-shadow" ref="nature0">请选择</span>
  							  <ul>
  							    <li v-for="(item, index) in subElementArr" @click="setSubElementType(item)">{{ item.dictName }}</li>
  							  </ul>
  							</div>
              </div>

						</div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-1 line-height-34 color-666">应用排序：</div>
						<div class="dy-fx-2">
							<input type="number" class="form-control" v-model="params.seq">
						</div>
					</div>

					<div class="dy-flex mt-10">
						<div class="dy-fx-1 line-height-34 color-666">应用名称：</div>
						<div class="dy-fx-2">
							<input type="text" class="form-control" v-model="params.elementName">
						</div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-1 line-height-34 color-666"><span v-if="params.elementType == 'DDAPP' || params.elementType == 'DDPROC'">{{ params.elementType == 'DDAPP' ? 'AgentID' : 'procCode'}}：</span></div>
						<div class="dy-fx-2">
							<input type="text" class="form-control" v-model="params.agentId" v-if="params.elementType == 'DDAPP'" >
              <input type="text" class="form-control" v-model="params.procId" v-if="params.elementType == 'DDPROC'" >
						</div>
					</div>

					<div class="dy-flex mt-10" v-if="params.elementType == 'LINK' || params.elementType == 'LPATH' || params.elementType == 'DDPATH'">
						<div class="dy-fx-1 line-height-34 color-666">链接地址：</div>
						<div class="dy-fx-6">
							<textarea rows="3" class="form-control" v-model="params.link"></textarea>
						</div>
					</div>
				<!-- end -->
				</div>
			</div>
			<div class="ptb-10 text-center">
        <button type="button" class="btn n-btn-primary mr-10" style="min-width: 90px;" @click="applyPost" v-if="!params.microappId">确定</button>
				<button type="button" class="btn n-btn-primary mr-10" style="min-width: 90px;" @click="applyPut" v-if="params.microappId">确定</button>
				<button type="button" class="btn n-btn-outline" @click="hideAddEditUse">取消</button>
			</div>
		</div>
	</div>

	<!-- //应用布局配置 2019-2-12 -->
	<div class="use-pop" v-if="useFlag">
		<div class="use-manage br-4">
			<div class="title">应用布局配置</div>
			<div class="close icon-Gm-close font-14 color-666" @click="hideLayout"></div>
			<div class="content">
				<div class="dy-flex ml-24 mr-24 pt-10">
					<div class="dy-fx-1 text-right line-height-34">应用标签：</div>
					<div class="dy-fx-3">
						<div class="select-ul" style="width: 70%;">
							<span class="select-name br-4 box-i-shadow" ref="useLabel">请选择</span>
						  <ul>
						    <li v-for="(item, index) in tagAllArr" @click="selTagIdEd(item)">{{ item.tagName }}</li>
						  </ul>
						</div>
					</div>
				</div>
				<div class="dy-flex ml-24 mr-24 pt-10 pb-10">
					<div class="dy-fx-1 text-right line-height-34">布局规则：</div>
					<div class="dy-fx-3">
						<div class="select-ul" style="width: 70%;">
							<span class="select-name br-4 box-i-shadow" ref="layoutName">请选择</span>
						  <ul>
						    <li v-for="(item, index) in layoutArr" @click="selRule(item)">{{ item.dictName }}</li>
						  </ul>
						</div>
					</div>
				</div>
			</div>
			<div class="ptb-10 text-center">
				<button type="button" class="btn n-btn-primary mr-10" style="min-width: 90px;" @click="pageLayoutPut">确定</button>
				<button type="button" class="btn n-btn-outline" @click="hideLayout">取消</button>
			</div>
		</div>
	</div>
</section>

<script src="modules/system_config/scripts/useManage1.js" charset="utf-8"></script>

<style media="screen">
  .active-use {
    background: rgba(240,240,247,1) !important;
  }
	.use-edit-pop {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0,0,0,.4);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.use-edit {
		width: 800px;
		background: #fff;
		position: relative;
	}
	.use-edit .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
	}
  .use-edit .pic img {
    border-radius: 50%;
  }


  .use-pop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0,0,0,.4);
    z-index: 999;
    display: flex;
		justify-content: center;
		align-items: center;
  }
	.use-manage {
		width: 440px;
		background: #fff;
		position: relative;
	}
	.use-manage .title {
		font-size: 16px;
		text-align: center;
		line-height: 45px;
	}
	.use-manage .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
	}
	.use-manage .content {
		background:rgba(249,249,249,1);
	}

  .button-footer {
    display: flex;
  }
  .button-footer>div {
    flex: 1;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #666;
    background:rgba(249,249,249,1);
  }
  .button-footer .save-erweima {
    background:rgba(68,73,135,1);
    color: #fff;
  }

  h4 {
    margin: 0;
  }
  .color-cfcfcf {
    color: #cfcfcf;
  }
  .search-container-house {
    position: relative;
  }
  .show-hide-term {
    width: 59px;
    height: 30px;
    line-height: 30px;
    color:rgba(244,174,71,1);
    margin-top: 5px;
    position: absolute;
    right: 0;
    bottom: 10px;
    background:rgba(244,174,71,0.3);
    border-radius:4px;
    text-align: right;
    padding-right: 5px;
  }
  .search-container-house .icon-turn-right {
    display: inline-block;
    transform: translate( -5px, 0) rotate(90deg);
  }
  .search-text {
    background:rgba(249,249,249,1);
    height: 34px;
    position:relative;
    width: 220px;
    border-radius: 4px;
  }
  .search-text span {
    position:absolute;
    left: 8px;
    top: 0;
    line-height: 34px;
  }
  .search-text input {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    outline: medium;
    text-indent: 25px;
  }
  .calendar-text {
    background:rgba(249,249,249,1);
    width: 140px;
    height: 34px;
    border-radius: 4px;
  }
  .calendar-text .icon-Gm-calendar:before {
    top: 0;
    right: 0;
  }
  .calendar-text .hl-date-text {
    background: none;
    box-shadow: none;
    border: 0;
  }
  .house-sharing-text span {
    background:rgba(249,249,249,1);
    box-shadow: none;
    border: 0;
    color: #666;
  }
  input::-webkit-input-placeholder {
    color: #999;
  }
  input:-moz-placeholder {
    color: #999;
  }
  input:-ms-input-placeholder {
    color: #999;
  }

	.um-list:nth-child(2n) {
		background:rgba(249,249,249,1);
	}
</style>
